<script setup lang="ts">

declare global {
  interface Window {
    setPureLayout: (index: number, left: string, top: string, width: string, height: string) => void;
  }
}


import { ref, onMounted, onUnmounted, nextTick } from "vue";
import TestRef from "./components/TestRef.vue";
import ThreeDWind from "./components/ThreeDWind.vue";
import Pure from "./components/PureThreeJS/Pure.vue";
import Juejin from "./components/TypescriptTest/juejin.vue"

const PURE_IN_WRAPPER_WIDTH = 15;
const PURE_IN_WRAPPER_HEIGHT = 50;


const pureStyles = ref([
  { left: '8%', top: '4%', width: PURE_IN_WRAPPER_WIDTH+'vw', height: PURE_IN_WRAPPER_HEIGHT+'vh', position: 'absolute' },
  { left: '38%', top: '2%', width: PURE_IN_WRAPPER_WIDTH+'vw', height: PURE_IN_WRAPPER_HEIGHT+'vh', position: 'absolute' },
  { left: '49%', top: '2%', width: PURE_IN_WRAPPER_WIDTH+'vw', height: PURE_IN_WRAPPER_HEIGHT+'vh', position: 'absolute' },
  { left: '78%', top: '4%', width:  PURE_IN_WRAPPER_WIDTH+'vw', height: PURE_IN_WRAPPER_HEIGHT+'vh', position: 'absolute' }
]);

// 生命周期钩子
onMounted(() => {
  console.log("组件已挂载 counter value is $(counter.value) ");
  const isAndroidWebView = /Android/.test( navigator.userAgent ) && /wv/.test( navigator.userAgent );
  if ( isAndroidWebView ) {
    document.body.style.backgroundColor = 'transparent';
    document.documentElement.style.backgroundColor = 'transparent';
    const app = document.getElementById('app');
    if( app ) {
        app.style.background = "transparent";
    }   
  }
    // 暴露全局方法
    window.setPureLayout = (index, left, top, width, height) => {
    pureStyles.value[index] = {
      ...pureStyles.value[index],
      left,
      top,
      width,
      height,
      position: 'absolute'
    };
  };
// 增加监听
window.addEventListener('setPureLayout', (e: any) => {
    const { index, left, top, width, height } = e.detail;
    pureStyles.value[index] = {
      ...pureStyles.value[index],
      left,
      top,
      width,
      height,
      position: 'absolute'
    };
  });
});

// let value_test; // This line was commented out, keeping it as is.
const pureWrapperRefs = ref<HTMLElement[]>([]);
const pureComponents = ref<InstanceType<typeof Pure>[]>([]);
onUnmounted(() => {
  window.removeEventListener('setPureLayout', setPureLayoutHandler);
  pureWrapperRefs.value = [];
  pureComponents.value = [];
});

// 事件处理函数单独定义，方便移除
function setPureLayoutHandler(e: any) {
  const { index, left, top, width, height } = e.detail;
  pureStyles.value[index] = {
    ...pureStyles.value[index],
    left,
    top,
    width,
    height,
    position: 'absolute'
  };
}
</script>

<template>
  <div class="app-container">
    <div
      v-for="i in 4"
      :key="i"
      class="pure-instance-wrapper"
      :ref="el => { if (el) pureWrapperRefs[i-1] = el as HTMLElement }"
      :style="pureStyles[i-1]"
    >
      <Pure :ref="el => { if (el) pureComponents[i-1] = el as InstanceType<typeof Pure> }" :instance-index="i-1" />
    </div>
  </div>
</template>

<style>
/* Keep existing global styles for body, html, #app */
body,
html,
#app {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  /* background-image: url("/img/Light.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;  */
  /* font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serifs; */
  /* background: transparent !important; */ /* Consider if this is needed or handled by JS */
}

.app-container {
  display: flex;
  position: absolute;
  left: 10%;
  top: 26%;
  width: 75vw;
  height: 50vh;

  /* border: 2px solid #FF0000;  */
  
}

.pure-instance-wrapper {
  width: 20%; /* Each instance takes 1/4 of the width */
  height: 50%; /* Each instance takes full height of the container */
  position: absolute; /* Important for positioning of absolute children like touch-area */
  /* border: 1px solid #555; */ /* Optional: for visualizing boundaries, remove for transparency */
  box-sizing: border-box;
  overflow: hidden; /* To contain the Pure component properly */

  /* border: 2px solid #00FF00; */
}

/* body, html, #app {
    background-color: transparent!important;
} */
</style>
